   //获取操作对象
   var box5=document.querySelector('.dbox')
   var mark=document.querySelector('.mark')
   var rightBox=document.querySelector('.rightBox')
   var rightImg=rightBox.querySelector('img')
   var imgs=document.querySelector('.imgs').querySelectorAll('img')

   //给box盒子绑定鼠标移入，移出，移动事件
   box5.onmouseover=function(){
       mark.style.display='block'
       rightBox.style.display='block'
   }
   box5.onmouseout=function(){
       mark.style.display='none'
       rightBox.style.display='none'
   }
   box5.onmousemove=function(e){
       //事件对象兼容
       var e = e || window.event
       //获取当前蒙版层的移动距离
       var left1=e.pageX-box5.offsetLeft-parseInt(mark.offsetWidth/2)
       var top1=e.pageY-box5.offsetTop-parseInt(mark.offsetHeight/2)
      
       //设置边界条件
       var maxX=box5.offsetWidth-mark.offsetWidth
       var maxY=box5.offsetHeight-mark.offsetHeight
      
       //右边图片的移动距离
       var imgX,imgY
       //水平方向
       if(left1<=0){
           mark.style.left="0px"
           imgX=0
       }else if(left1>maxX){
           mark.style.left=maxX+'px'
           imgX=maxX
       }else{
           mark.style.left=left1+'px'
           imgX=left1
       }

       //垂直方向
       if(top1<=0){
           mark.style.top='0px'
           imgY=0
       }else if(top1>maxY){
           mark.style.top=maxY+'px'
           imgY=maxY
       }else{
           mark.style.top=top1+'px'
           imgY=top1
       }

       //让右边的图片跟着移动
       rightImg.style.left=-2*imgX+'px'
       rightImg.style.top=-2*imgY+'px'
   }

   //遍历每个图片对象
   for(var i=0;i<imgs.length;i++){
       //给每个图片对象绑定点击事件
       imgs[i].onclick=function(){
           //获取当前点击的图片对象的src属性值
           var src1=this.getAttribute('src')
           //把当前src属性值赋值给上面左右两个盒子的img对象中
           box5.querySelector('img').setAttribute('src',src1)
           rightImg.setAttribute('src',src1)
           //把当前图片中所有的class属性值清空
           for(var j=0;j<imgs.length;j++){
               imgs[j].className=''
           }
           //给当前点击的图片对象添加class属性值
           this.className='border'
       }
   }